<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI多角色聊天系统</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .main-container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            overflow: hidden;
        }
        .header {
            background: linear-gradient(135deg, #3a6186 0%, #89253e 100%);
            color: white;
            padding: 30px;
            text-align: center;
            position: relative;
        }
        .header h1 {
            margin: 0;
            font-size: 2.5em;
            font-weight: 300;
        }
        .header p {
            margin: 10px 0 0 0;
            opacity: 0.9;
            font-size: 1.1em;
        }

        .nav-section {
            padding: 40px;
        }
        .persona-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 30px;
        }
        .persona-card {
            background: #f8f9fa;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer;
        }
        .persona-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            border-color: #007bff;
        }
        .persona-initials {
            font-size: 3em;
            font-weight: bold;
            color: #007bff;
            margin-bottom: 15px;
        }
        .persona-name {
            font-size: 1.3em;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
        }
        .persona-desc {
            color: #666;
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .persona-features {
            display: flex;
            justify-content: space-around;
            margin-bottom: 20px;
        }
        .feature {
            text-align: center;
            font-size: 0.9em;
        }
        .feature-icon {
            font-size: 1.5em;
            margin-bottom: 5px;
            display: block;
        }
        .start-btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1em;
            transition: background 0.3s ease;
        }
        .start-btn:hover {
            background: #0056b3;
        }
        .test-section {
            background: #f8f9fa;
            padding: 30px;
            text-align: center;
        }
        .test-btn {
            background: #28a745;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1em;
            margin: 10px;
            transition: background 0.3s ease;
        }
        .test-btn:hover {
            background: #1e7e34;
        }
    </style>
</head>
<body>
    <div class="main-container">
        <div class="header">

            <h1>🤖 AI多角色聊天系统</h1>
            <p>与三位不同性格的AI角色进行智能对话，体验独特的声音和个性</p>
        </div>
        
        <div class="nav-section">
            <h2 style="text-align: center; color: #333; margin-bottom: 20px;">选择您的AI伙伴</h2>
            
            <div class="persona-grid">
                <!-- 苏格拉底 -->
                <div class="persona-card" onclick="startChat('SG')">
                    <div class="persona-initials">SG</div>
                    <div class="persona-name">苏格拉底</div>
                    <div class="persona-desc">古希腊哲学家，以苏格拉底式提问法著称，善于通过问题引导思考，启发智慧。</div>
                    <div class="persona-features">
                        <div class="feature">
                            <span class="feature-icon">🎭</span>
                            <div>理性哲学</div>
                        </div>
                        <div class="feature">
                            <span class="feature-icon">🎯</span>
                            <div>启发提问</div>
                        </div>
                        <div class="feature">
                            <span class="feature-icon">🔊</span>
                            <div>小陈音色</div>
                        </div>
                    </div>
                    <button class="start-btn">开始对话</button>
                </div>
                
                <!-- 孙悟空 -->
                <div class="persona-card" onclick="startChat('SW')">
                    <div class="persona-initials">SW</div>
                    <div class="persona-name">孙悟空</div>
                    <div class="persona-desc">齐天大圣孙悟空，机智勇敢，神通广大，用幽默风趣的语言展现豪迈气概。</div>
                    <div class="persona-features">
                        <div class="feature">
                            <span class="feature-icon">⚡</span>
                            <div>机智勇敢</div>
                        </div>
                        <div class="feature">
                            <span class="feature-icon">😄</span>
                            <div>幽默风趣</div>
                        </div>
                        <div class="feature">
                            <span class="feature-icon">🔊</span>
                            <div>Jam音色</div>
                        </div>
                    </div>
                    <button class="start-btn">开始对话</button>
                </div>
                
                <!-- 达芬奇 -->
                <div class="persona-card" onclick="startChat('DF')">
                    <div class="persona-initials">DF</div>
                    <div class="persona-name">列奥纳多·达·芬奇</div>
                    <div class="persona-desc">文艺复兴时期的全才，画家、发明家、科学家，善于将艺术与科学结合。</div>
                    <div class="persona-features">
                        <div class="feature">
                            <span class="feature-icon">🎨</span>
                            <div>艺术创作</div>
                        </div>
                        <div class="feature">
                            <span class="feature-icon">🔬</span>
                            <div>科学探索</div>
                        </div>
                        <div class="feature">
                            <span class="feature-icon">🔊</span>
                            <div>彤彤音色</div>
                        </div>
                    </div>
                    <button class="start-btn">开始对话</button>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h3>系统测试</h3>
            <p>开发者工具 - 测试各项功能是否正常</p>
            <button class="test-btn" onclick="window.open('test-multi-persona.html', '_blank')">🧪 API接口测试</button>
            <button class="test-btn" onclick="window.open('voice-chat.html', '_blank')">🎤 语音聊天测试</button>
            <button class="test-btn" onclick="window.open('text-chat.html', '_blank')">💬 文本对话测试</button>
        </div>
    </div>
    

    <script>
        async function startChat(initials) {
            // 直接跳转到聊天页面，无需认证
            const chatUrl = `voice-chat.html?initials=${initials}`;
            window.location.href = chatUrl;
        }
        
        // 页面加载时的初始化
        window.onload = function() {
            console.log('欢迎使用AI多角色聊天系统！');
            console.log('支持的角色: SG(苏格拉底), SW(孙悟空), DF(达芬奇)');
        };
    </script>
</body>
</html>